﻿<template>
  <el-date-picker v-model="myValue"
                  :format="format"
                  :type="datePickerType"
                  :value-format="valueFormat"
                  :picker-options="pickerOptions"
                  :default-time="myDefaultTime"
                  :class="className"
                  :disabled="disabled"
                  :readonly="readonly"
                  :size="size"
                  :range-separator="rangeSeparator"
                  :start-placeholder="startPlaceholder"
                  :end-placeholder="endPlaceholder"
                  @change="change"></el-date-picker>
</template>

<script>
export default {
  props: {
    className: {
      type: String,
    },
    value: [String, Array],
    format: {
      type: String,
      default: "yyyy-MM-dd",
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd",
    },
    rangeSeparator: {
      type: String,
      default: "-",
    },
    startPlaceholder: {
      type: String,
      default: "开始日期",
    },
    endPlaceholder: {
      type: String,
      default: "结束日期",
    },
    pickerOptions: {
      type: Object,
    },
    datePickerType: {
      type: String,
    },
    defaultTime: {
      type: [String, Array],
      default: null,
    },
    size: {
      type: String,
      default: "",
    },
    readonly: {
      type: Boolean,
    },
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {
      myValue: "",
    };
  },
  watch: {
    value(newVal, oldVal) {
      this.myValue = newVal;
    },
    myValue(newVal) {
      this.$emit("input", newVal);
    },
  },
  computed: {
    myDefaultClass() {
      var className = null;

      if (this.className == null) {
        switch (this.format) {
          case "yyyy-MM-dd":
            className = `dateformat_${this.size}`;
            break;
          case "yyyy-MM-dd HH:mm:ss":
            className = `timeformat_${this.size}`;
            break;
        }
      }

      return className;
    },
    myDefaultTime() {
      let defaultTime = this.defaultTime;

      if (this.defaultTime == null) {
        switch (this.datePickerType) {
          case "datetimerange":
            defaultTime = ["0:00:00", "23:59:59"];
            break;
          default:
        }
      }

      return defaultTime;
    },
  },
  methods: {
    change(newVal) {
      this.$emit("change", newVal);
    },
  },
  mounted() {
    this.myValue = this.value;
  },
};
</script>

<style>
.el-date-editor.dateformat_mini {
  width: 125px;
}

.el-date-editor.dateformat_normal {
  width: 150px;
}

.el-date-editor.timeformat_mini {
  width: 175px;
}

.el-date-editor.timeformat_normal {
  width: 200px;
}
</style>
